import type { VNode } from 'vue'
import type { AreaInfoPopoverPropsType } from './typings'
// import { ref } from 'vue'
import {
  ElPopover,
  ElCard,
  ElRow,
  ElCol,
  ElDescriptions,
  ElDescriptionsItem,
  ElLink,
  ElSpace,
  ElImage,
  ElTooltip
} from 'element-plus'
import SaasTitle from '~/components/SaasTitle'
import AliIcon from '~/components/AliIocn'
import styles from '../../index.module.scss'

export default function AreaInfoPopover(props: AreaInfoPopoverPropsType): VNode {
  return (
    <ElPopover
      visible
      placement="top"
      teleported={false}
      popperClass={styles['asset-home-info-popover']}
      {...{
        // virtualRef: props.dom,
        virtualRef: {
          getBoundingClientRect() {
            return DOMRect.fromRect({
              width: 0,
              height: 0,
              x: props.left,
              y: props.top
            })
          }
        },
        virtualTriggering: true
      }}
    >
      <ElCard
        class={styles['asset-home-area-info-card']}
        shadow="never"
        v-slots={{
          header: () => (
            <ElRow>
              <ElCol span={18}>
                <SaasTitle type="primary">
                  <ElTooltip content={props?.areaInfo?.name}>
                    <section class="text-one-line-overflow">{props?.areaInfo?.name}</section>
                  </ElTooltip>
                </SaasTitle>
              </ElCol>
              <ElCol span={6} {...{ align: 'right' }}>
                <ElLink
                  class={styles['asset-home-info-popover-close']}
                  underline={false}
                  onClick={props.onCancel}
                >
                  <AliIcon type="icon-danchuang-guanbi" />
                </ElLink>
              </ElCol>
            </ElRow>
          )
        }}
      >
        <ElDescriptions column={1}>
          {props?.popoverInfo?.infoList?.map((item) => (
            <ElDescriptionsItem label={item.key}>
              {item.type === 'text' && item.value}
              {item.type === 'image' && item.value && typeof item.value === 'string' && (
                <ElSpace>
                  {item.value?.split(',')?.map((url: string, index: number, arr: string[]) => (
                    <ElImage
                      class={styles['asset-home-light-info-image']}
                      src={url}
                      previewSrcList={arr}
                      initialIndex={index}
                      previewTeleported
                    />
                  ))}
                </ElSpace>
              )}
            </ElDescriptionsItem>
          ))}
        </ElDescriptions>
      </ElCard>
    </ElPopover>
  )
}
